<template>
    <div class="train-page">
        
        <div class="type-box">
            <div class="data">
                <span class="name1">已学状态:</span>
                <span class="item" v-for="(item,index) in typeLIst1" :class="item.addClass">{{item.name}}</span>
            </div>
            <div class="data">
                <span class="name1">类 型:</span>
                <span class="item" v-for="(item,index) in typeLIst2" :class="item.addClass">{{item.name}}</span>
            </div>
        </div>
        <div class="main-box" v-show="show">
            <!-- <h3 class="top-title">所有培训计划</h3> -->
            <div class="all-train">
                <div class="train-item" v-for="(item,index) in 8">
                    <img src="@/assets/image/course1.jpg" alt="">
                    <div style="float:left;width:290px;margin-right:30px;">
                        <span class="name">名称：成人教育系列</span>
                        <span class="time">开课时间：2020-06-15 12：30：30</span>
                        <span class="xing">培训形式：线上学习</span>
                        <span class="number">已报名人数：665人</span>
                    </div>
                    <div style="float:left;width:calc(100% - 700px);" class="right-data">
                        <span class="name">课程数量：168课时</span>
                        <span class="name">证书名称：开发者证书</span>
                        <p class="xing">培训费用：<span style="font-size:20px;font-weight:600;color:red">3000</span></p>
                    </div>
                    <div class="button-box">
                        <div class="go">立即报名</div>
                        <div class="see" @click="goContent(item,'/train_content/c52af770b4844f5f97d61360f7eebf47')">查看详情</div>
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>
            <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="10"></ui-pagination>
        </div>
        <div class="main-box" v-show="!show">
            <div class="type-main">
                <div class="type-item" :class="'type'+index" v-for="(item,index) in list">
                    <div class="big-title" :class="'big'+index"><span>{{item.title}}</span></div>
                    <div class="er-box">
                        <div class="er-item" v-for="(item1,index1) in item.list">
                            <div class="left" :class="'left'+'-'+index+'-'+index1">
                                {{item1.title}}
                            </div>
                            <div class="right" :class="'right'+'-'+index+'-'+index1">
                                <span class="text-item" v-for="(item2,index2) in item1.list" :style="'background:'+item1.color">{{item2.title}}</span>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                            
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import nodata from '@/components/nodata.vue'
import $ from "jquery"
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            total:null,
            list:[
                {
                    title:'必修',

                    list:[
                        {
                            title:'管理基础',
                            color:'#97d6fe',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                            ]
                        },
                        {
                            title:'管理基础与技巧',
                            color:'#feb6a0',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                           
                            ]
                        },
                        {
                            title:'素养提升',
                            color:'#fedf8b',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                               
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                            ]
                        },
                        {
                            title:'宏观视野',
                            color:'#9fe6b8',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                
                            ]
                        },
                    ]
                },
                {
                    title:'选修',

                    list:[
                        {
                            title:'管理基础',
                            color:'#feb6a0',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},

                            ]
                        },
                        {
                            title:'管理基础与技巧',
                            color:' #fedf8b',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},

                           
                            ]
                        },
                        {
                            title:'素养提升',
                            color:'#9fe6b8',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                               
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                            ]
                        },
                        {
                            title:'宏观视野',
                            color:' #97d6fe',
                            list:[
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                {title:'企业管理概览'},
                                {title:'管理沟通实物'},
                                {title:'企业管理概览'},
                                
                            ]
                        },
                    ]
                },
         
            ],
            typeLIst1:[
                {name:'全部',addClass:'active'},
                {name:'已报名',addClass:''},
                {name:'未报名',addClass:''},
            ],
            typeLIst2:[
                {name:'全部',addClass:'active'},
                {name:'必须',addClass:''},
                {name:'选修',addClass:''},
            ],
            show:true,
        }
    },
    created(){
        
        
    },
    mounted(){
        this.list.forEach((item,i)=>{
            
            if(item.list!=0){
                item.list.forEach((item1,i1)=>{
                    let h1 = $(".right-"+i+"-"+i1).innerHeight();
                    $(".left-"+i+"-"+i1).height(h1);
                    $(".left-"+i+"-"+i1).css("line-height",h1+"px");

                    let h = $(".type"+i).height();
                    $(".big"+i).height(h);
                })
            }

        })
       
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        goPage(){

        },
        goContent(item,url){
            this.$router.push(url);
        },
        pageChange(index){
            
        }
    }
}
</script>

<style lang="less">
    .train-page{
        width:100%;
        height:100%;
        box-sizing:border-box;
        padding:25px;
        overflow:hidden;
        overflow-y:auto;
        .type-main{
            width:100%;
            box-sizing:border-box;
            padding:0px;
            border:1px solid #eaeaea;
            .type-item{
                width:100%;
                .big-title{
                    width:10rem;
                    height:100%;
                    position:relative;
                    float:left;
                    box-sizing:border-box;
                    border-right:1px solid #eaeaea;
                    border-bottom:1px solid #eaeaea;
                    span{
                        position:absolute;
                        font-size:16px;
                        width:100%;
                        text-align:center;
                        display:block;
                        left:0;
                        top:50%;
                        transform:translateY(-50%);
                        color:#555555;
                    }
                }
                .er-box{
                    width:calc(100% - 10rem);
                    float:left;
                    box-sizing:border-box;
                    
                    .er-item{
                        width:100%;
                        position:relative;
                        box-sizing:border-box;
                        
                        
                        .left{
                            width:15rem;
                            float:left;
                            text-align:center;
                            font-size:16px;
                            color:#555555;
                            border-right:1px solid #eaeaea;
                            border-bottom:1px solid #eaeaea;
                            box-sizing:border-box;
                        }
                        .right{
                            width:calc(100% - 15rem);
                            float:left;
                            padding-top:1rem;
                            .text-item{
                                padding:0 1.5rem;
                                height:2rem;
                                float:left;
                                margin-bottom:1rem;
                                line-height:2rem;
                                color:#fff;
                                font-size:14px;
                                border-radius:1rem;
                                margin-left:1rem;
                                display:block;
                            }
                        }

                        
                    }
                    .er-item:nth-child(2n){
                        .left{
                            
                        }
                        .right{
                            
                        }
                    }
                }
            }
            .type-item:last-child{
                .big-title{
                    border-bottom:0;
                }
                .er-box{
                    .er-item:last-child{
                        .left{
                            border-bottom:0;
                        }
                        
                    }
                }
            }
        }
        .type-box{
            width:100%;
            .data{
                width:100%;
                height:30px;
                margin-bottom:10px;
                .name1{
                    float:left;
                    display:block;
                    width:70px;
                    text-align:right;
                    font-size:14px;
                    height:30px;
                    line-height:30px;
                    color:#555555;
                }
                .item{
                    margin-left:10px;
                    height:30px;
                    line-height:30px;
                    padding:0 10px;
                    font-size:14px;
                    color:#666666;
                    float:left;
                    cursor:pointer;
                }
                .active{
                    background:#0068b7;
                    border-radius:3px;
                    color:#fff;
                }
            }
        }
        .content-box{
            padding-top:0px !important;
        }
        .all-train{
            width:100%;
            margin:0 auto;
            margin-bottom:60px;
            
            .train-item{
                box-sizing:border-box;
                padding:15px 20px;
                width:100%;
                border: 1px #d8d8d8 solid;
                margin-top:20px;
                position:relative;
                img{
                    width:320px;
                    height:185px;
                    display:block;
                    margin-right:50px;
                    float:left;
                }
                .name{
                    display:block;
                    width:320px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#444444;
                    margin-top:10px;
                    float:left;
                }
                .time{
                    display:block;
                    width:320px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#444444;
                    float:left;
                    margin-top:10px;
                }
                .xing{
                    display:block;
                    width:320px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#444444;
                    float:left;
                    margin-top:10px;
                }
                .number{
                    display:block;
                    width:320px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height:30px;
                    line-height:30px;
                    font-size:16px;
                    color:#444444;
                    float:left;
                    margin-top:10px;
                }
                .button-box{
                    position:absolute;
                    right:35px;
                    top:50%;
                    transform:translateY(-50%);
                    .go{
                        width:140px;
                        height:40px;
                        line-height:40px;
                        text-align:center;
                        color:#fff;
                        font-size:16px;
                        background:#ee5c5c;
                        margin-bottom:20px;
                        cursor:pointer;
                    }
                    .see{
                        width:140px;
                        height:40px;
                        line-height:40px;
                        text-align:center;
                        color:#fff;
                        font-size:16px;
                        background:#3f96f2;
                        cursor:pointer;
                    }
                }
            }
        }
        .top-title{
            width:100%;
            margin:0 auto;
            line-height:50px;
            position:relative;
            font-size:20px;
            color:#555555;
            margin-top:20px;
            margin-bottom:10px;
        }
        .top-title:before{
            position:absolute;
            content:'';
            bottom:0;
            left:0;
            width:120px;
            height:3px;
            background:#17a2b8;
        }

        .right-data{
            .name,.xing{
                width:100% !important;
            }
        }
    }
    

</style>
